<template>
  <div class="w-full h-full flex items-center">
    <div class="a w-1/4 relative">
      <div class="b absolute top-20 w-1/6 h-44 ml-28">
        <img
          src="https://pic1.imgdb.cn/item/64732062f024cca173948fed.png"
          alt=""
          class="b-img"
        />
        <div class="b1">
          <div class="text-4xl font-normal text-white">来探索美食</div>
          <br />
          <div class="text-2xl text-white">品尝甜蜜，探索新意</div>
        </div>
      </div>
      <div class="rigth bg-white">
        <div class="rigth-a">
          <span class="text-4xl">密码登录</span>
        </div>
        <div class="rigth-inp-a">
          <div class="rigth-inp">
            <div class="rigth-inp-img">
              <img
                src="https://pic1.imgdb.cn/item/64732069f024cca1739496db.png"
                alt=""
                class="w-full"
              />
            </div>
            <input
              type="text"
              v-model="phones"
              placeholder="账号/邮箱/手机号"
            />
          </div>
          <div class="rigth-inp">
            <div class="rigth-inp-img">
              <img
                src="https://pic1.imgdb.cn/item/6473205af024cca17394876a.png"
                alt=""
                class="w-full"
              />
            </div>
            <input type="text" v-model="userpwd" placeholder="请输入登录密码" />
          </div>
        </div>
        <button @click="add">登录</button>
        <div class="rigth-p">
          <RouterLink to="/regiSter"><span>免费注册</span></RouterLink>
          &nbsp;&nbsp;&nbsp;
          <span>忘记密码</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
let userpwd = ref("");
let phones = ref("");
let id=ref()
let add = function () {
  let that = this;
  var myHeaders = new Headers();
  myHeaders.append("User-Agent", "Apifox/1.0.0 (https://www.apifox.cn)");
  var formdata = new FormData();
  formdata.append("phone", that.phones);
  formdata.append("pwd", that.userpwd);
  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: formdata,
    redirect: "follow",
  };
  if (phones.value == "admin" && userpwd.value == "admin") {
    axios
      .post(
        `http://1.14.126.98:8081/admin/login?admin=${phones.value}&pwd=${userpwd.value}`
      )
      .then((res) => {
        alert(res.data);
        router.push("manage");
      });
  } else {
    axios
      .post(
        `http://1.14.126.98:8081/user/login?phone=${phones.value}&pwd=${userpwd.value}`
      )
      .then((res) => {
        id.value = res.data.userid
        localStorage.setItem('userid',id.value)
        console.log(id.value);
        sessionStorage.setItem("usertaken", res.data.token);
        router.push({
          name: "Nhome", query: {
          id:id.value
        }});
      });
  }
};
</script>

<style lang="scss" scoped>
@import "@/components/zhouq/logon/index.scss";
</style>
